<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>${data.pagetitle}</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telphone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <jsp:include page="../comm/comm.jsp"/>
    <style type="text/css">
        body { min-width:320px;background:#fff; font:normal 18px/1.5 helvetica, 微软雅黑, verdana, san-serif;color:#333;}
        *{margin: 0;padding: 0;}
        .header {
            height: 45px;
            width: 100%;
            background-color: #f1130e;
            position: relative;
            line-height: 45px;
            text-align: center;
            color: white;
            font-size: 18px;
            letter-spacing: 2px
        }
        .fanhui{
            width: 17%;
            height: 100%;
            background: url(/images/fanhui.png) no-repeat;
            background-size: 55% 76%;
            background-position-y: 5px;
            float: left;
        }
        .qiandao{
            width: 100%;
            height: 228px;
            background-color: white;
            opacity: 0.4;
            box-shadow: 2px 2px 5px #f1130e;
        }
        i{
            font-style: normal;
        }
        .qd_day{
            color: #f1130e;
            font-size: 23px;
        }
        .qd_qiu{
            display:inline-block;
            width: 22px;
            height: 22px;
            background-image: url(/images/qd_w.png);
            background-size: 100% 100%;
        }
        .qd_qiu_h{
            background-image: url(/images/qd_h.png);
            background-size: 100% 100%;
        }
        .qd_span{
            display: inline-block;
            width: 41px;
        }
        .qd_span i{
            font-size: 14px;
            margin-left: -5px;
        }
        .my_pm{
            width: 100%;
            height: 52px;
            margin-top: 5px;
        }
        .my_pm p{
            display: inline-block;
            height: 100%;
            font-size: 14px;
            overflow: hidden;
            line-height: 50px;
            text-align: center;
        }
        .my_pm p span{
            display: inline-block;
        }
        .my_pm p i{
            color: #f1130e;
        }
        .qd_leibiao{
            width: 100%;
            height: 245px;
            overflow:scroll;
        }
        .qd_leibiao .my_pm{
            border: 1px solid #cccccc;
            background-color: white;
        }
        .qd_tp{
            width: 105px;
            height: 105px;
            margin: auto;
        }
        .qd_tp_y{
            background-image: url(/images/y_qd.png);
            background-size: 100% 100%;
        }
        .qd_tp_w{
            background-image: url(/images/w_qd.png);
            background-size: 100% 100%;
        }
        .zhezhao{
            width: 100%;
            height: 100%;
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            opacity: 0.3;
        }
        .ts_end{
            width: 80%;
            height: 180px;
            background-color: white;
            position: fixed;
            top: 37%;
            left: 39px;
            z-index: 8888;
            border-radius: 6px;
        }
        .button{
            width: 120px;
            height: 33px;
            border: none;
            background-color: #e40001;
            color: white;
            border-radius: 20px;
            margin: 21px 79px;
            font-size: 16px;
            line-height: 16px;
            outline:none;
        }
    </style>
</head>
<body style="background-image: url(/images/qd_bj.jpg);background-size: 100%;">
<div class="header">
    <div class="fanhui"></div>
    <div id="" style="width: 80%;">${data.title}</div>
</div>

<div style="position: relative;">
    <div class="qiandao"></div>
    <div style=";position: absolute;top: 0;left: 0;width: 100%;text-align: center;">
        <c:if test="${list.signCyuser=='0'}">
            <div class="qd_tp qd_tp_w"></div>
        </c:if>
        <c:if test="${list.signCyuser=='1'}">
            <div class="qd_tp  qd_tp_y"></div>
        </c:if>
        <p style="font-size: 15px;margin-top: 2px;">已连续签到<i class="qd_day">${list.newCyuser.num}</i>天</p>
        <p style="font-size: 13px;margin-top: 2px;">活动时间：${data.startDate}到${data.endDate}</p>
        <div style="width: 90%;height: 56px;margin: auto;padding-top: 10px;position: relative;margin-top: 15px;">
            <div style="width: 80%;height: 3px;background-color: #cccccc;margin: auto;"></div>
            <div style="position: absolute;top: 1px;margin: auto;width: 100%;">
                 <c:forEach var="item" items="${list.listMap}">
                     <span class="qd_span">
                         <c:if test='${item.value=="1"}'>
                             <span class="qd_qiu qd_qiu_h"></span>
                         </c:if>
                           <c:if test='${item.value=="0"}'>
                               <span class="qd_qiu "></span>
                           </c:if>
						<i>${item.key}</i>
					</span>
                 </c:forEach>
            </div>
        </div>
    </div>

    <div class="my_pm">
        <p style="width: 37%">
            <span style="width: 50px;height: 50px;background-image: url(${list.cyuser.headimgurl});background-size: 100% 100%;"></span>
            <span style="line-height: 50px;overflow: hidden;">${list.cyuser.nickname}</span>
        </p>
        <p style="width: 20%">
            签到<i>${list.count}</i>天
        </p>
        <p style="width: 40%;float: right;">
            我的排名：第<i>${list.paiming}</i>名
        </p>
    </div>

    <p style="text-align: center;">
        <span style="display: inline-block;width: 100px;height: 50px;background-image: url(/images/qd_bang.png);background-size: 100% 100%;"></span>
    </p>

    <div class="qd_leibiao">
        <c:forEach var="item" items="${list.data}" varStatus="index">
            <div class="my_pm">
                <p style="width: 37%">
                    <span style="width: 50px;height: 50px;background-image: url(${item.headimgurl});background-size: 100% 100%;"></span>
                    <span style="line-height: 50px;overflow: hidden;">${item.nickname}</span>
                </p>
                <p style="width: 20%">
                    连续签到<i>${item.num}</i>天
                </p>
                <p style="width: 27%;float: right;position: relative;">
                    第<i>${index.index+1}</i>名

                    <span style="display: inline-block;width: 22px;height: 22px;position: absolute;top: 0;left: 18px;background-image: url(./img/wg.png);background-size: 100% 100%;"></span>
                </p>
            </div>
        </c:forEach>

    </div>
</div>
<div class="zhezhao" style="display: none"></div>
<div class="ts_end" style="display: none">
    <p style="margin: 26px;" id="dateString">截止${data.endDate}  <span style="color: #e40001;">活动已结束 !</span></p>
    <p style="color: #888888;margin-left: 77px;margin-top: -8px;font-size: 16px;" id="jqqd">敬请期待</p>
    <button class="button" onclick="closePage()">点击关闭</button>
</div>



</body>
</html>
<script type="text/javascript">
    isOver('${data.status}','${data.startDate}','${data.endDate}')
    var  activityId=config.getQueryString("activityId");
    $(".qd_tp_w").click(function(){
        config.commPost("/cyuser/sign",{activityId:activityId},function (data) {
            // $(this).removeClass('qd_tp_w');
            // $(this).addClass('qd_tp_y');
            // var num = $(".qd_day").html();
            // num = num*1+1;
            // $(".qd_day").html(num);
            location.reload();
        })


    })

    // $(".qd_tp").one("click",function(){
    //
    // }) ;


</script>